<script>
import { moment } from 'istrong-timeutil';
import { get } from 'istrong-axiosmodel';
import orderBy from 'lodash/orderBy';
import isEmpty from 'lodash/isEmpty';
import { vList } from 'istrong-mvue-common-ui';
import { TabContainer, TabContainerItem, Swipe, SwipeItem } from 'mint-ui';

import renderChart from '../../libs/chart/waterloggingChart';

export default {
  name: 'waterChart',
  data () {
    return {
      id: '',
      name: '',
      baseInfo: {},
      beginTime: moment(),
      endTime: moment(),
      chartData: { data: [] },
      listData: [],
      listField: [
        {
          fieldLabel: '时间',
          fieldName: 'time',
          fieldType: 'Date',
          format: 'MM-DD HH时mm分',
          headerClass: 'chartViewer-WaterLoggingList-Time',
          contentClass: 'chartViewer-WaterLoggingList-Time'
        },
        {
          fieldLabel: '水位<span class="listViewer-header-unit">(m)</span>',
          fieldName: 'val',
          fieldType: 'Number',
          fixed: 2,
          headerClass: 'chartViewer-WaterLoggingList-Val',
          contentClass: 'chartViewer-WaterLoggingList-Val'
        }
      ],
      workingPhotos: [],
      deviceInfo: [],
      tabPages: [
        { id: 'tab-container-chart', name: '水位' },
        { id: 'tab-container-info', name: '设备' }
      ],
      selectedTab: 'tab-container-chart'
    }
  },
  components: {
    'mt-tab-container': TabContainer,
    'mt-tab-container-item': TabContainerItem,
    'mt-swipe': Swipe,
    'mt-swipe-item': SwipeItem,
    'vc-List': vList
  },
  watch: {
    baseInfo (val) {
      let info = val || {};
      this.deviceInfo = [{
        label: '测站编号:',
        value: this.id
      }, {
        label: '测站名称:',
        value: this.name
      }, {
        label: '经度:',
        value: info.lng
      }, {
        label: '纬度:',
        value: info.lat
      }, {
        label: '测站地址:',
        value: info.address
      }];
    }
  },
  methods: {
    getChartData () {
      get('waterlogging.details', {
        waterloggingDetails: {
          id: this.id,
          time: ['[', moment(this.beginTime).format('YYYY-MM-DDTHH:mm:00'), ',', moment(this.endTime).format('YYYY-MM-DDTHH:mm:00'), ']'].join('')
        }
      }).then(result => {
        result = result.data || result;
        let data = result.length > 0 ? result[0] : {
          data: []
        };
        this.listData = orderBy(data.data, ['time'], ['desc']);
        this.chartData = data;

        this.redrawChart();
      });
    },
    getDeviceInfo () {
      get('waterlogging.info', {
        waterloggingDevice: {
          id: this.id,
          time: ['[', moment(this.beginTime).format('YYYY-MM-DDTHH:mm:00'), ',', moment(this.endTime).format('YYYY-MM-DDTHH:mm:00'), ']'].join('')
        },
        waterloggingWorkingPhoto: {
          id: this.id
        }
      }).then(result => {
        if (!isEmpty(result[0].data)) {
          let device = result[0].data[0];
          this.deviceInfo.push({
            label: '蓄电池电压:',
            value: device.batvt ? device.batvt + ' 伏特' : ''
          });
          this.deviceInfo.push({
            label: '电压正常范围:',
            value: device.vrange ? device.vrange + ' 伏特' : ''
          });
        }
        if (result.length > 1 && !isEmpty(result[1].data)) {
          this.workingPhotos = result[1].data;
        } else {
          this.workingPhotos = [{
            id: '-1',
            url: require('../../assets/no_picture.png')
          }]
        }

      })
    },
    redrawChart () {
      renderChart(this._chart, 'chartViewer-WaterLoggingChart', this.chartData, this.beginTime, this.endTime)
    },
    routerToMap () {
      this.$router.push({
        name: 'waterlogging/main',
        params: {
          id: this.id,
          showType: 'map'
        }
      });
    }
  },
  computed: {
    header_BeginTime: function () {
      return moment(this.beginTime).format('DD日HH时mm分');
    },
    header_EndTime: function () {
      return moment(this.endTime).format('DD日HH时mm分');
    }
  },
  mounted () {
  },
  created () {
  },
  beforeRouteEnter (to, from, next) {
    let { id, name, beginTime, endTime } = to.query;
    let { baseInfo } = to.params;
    next(vm => {
      // 通过 `vm` 访问组件实例
      vm.id = id;
      vm.name = name;
      vm.beginTime = beginTime;
      vm.endTime = endTime;
      vm.baseInfo = baseInfo;
      vm.selectedTab = 'tab-container-chart';
      vm.getChartData();
      vm.getDeviceInfo();
    });
  }
}
</script>
<template>
  <div id="chartViewer">
    <div class="appHeader-listViewer">
      <div class="appHeader-listViewer-Time">{{header_BeginTime}} 至 {{header_EndTime}}</div>
      <div
        class="btChangeRouterMap"
        @click="routerToMap"
      >
        <span class="ion-ios-location"></span>
      </div>
    </div>
    <div class="chartViewer-IntervalTab">
      <div
        v-for="tabItem in tabPages"
        @click="selectedTab=tabItem.id"
        :class="tabItem.id === selectedTab ? 'chartViewer-IntervalTab-Checked' : ''"
        class="chartViewer-IntervalTabItem-WaterLogging"
      >{{tabItem.name}}</div>
    </div>
    <mt-tab-container
      class="chartViewer-IntervalTabPage"
      v-model="selectedTab"
      swipeable
    >
      <mt-tab-container-item
        id="tab-container-chart"
        class="tab-container-chart"
      >
        <div class="chartViewer-Chart">
          <div class="chartViewer-Chart-Name">{{name}}</div>
          <div id="chartViewer-WaterLoggingChart"></div>
        </div>
        <div class="div-chart-hr"></div>
        <div class="chartViewer-List-Content">
          <vc-List
            :data="listData"
            :fields="listField"
            class="chartViewer-List"
          ></vc-List>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="tab-container-info">
        <mt-swipe
          class="tab-container-info-imgswipe"
          :prevent="true"
          :stopPropagation="true"
        >
          <mt-swipe-item
            v-for="photo in workingPhotos"
            :key="photo.id"
          >
            <slot>
              <img
                :src="photo.url"
                class="tab-container-info-imgswipe-img"
              />
            </slot>
          </mt-swipe-item>
        </mt-swipe>
        <div class="div-chart-hr"></div>
        <div class="deviceInfo">
          <div
            v-for="item in deviceInfo"
            class="deviceInfoItem"
          >
            <div class="deviceInfoItem-Label">{{item.label}}</div>
            <div class="deviceInfoItem-value">{{item.value}}</div>
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<style>
.tab-container-chart > div {
  float: left;
}
.chartViewer-IntervalTabItem-WaterLogging {
  width: 60px;
  text-align: center;
}
.tab-container-info-imgswipe {
  width: 100%;
  height: 247px !important;
}
.tab-container-info-imgswipe-img {
  width: 100%;
  height: 247px !important;
}
.deviceInfo {
  width: 100%;
  margin-top: 10px;
}
.deviceInfoItem {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: 14px;
  line-height: 20px;
}
.deviceInfoItem-Label {
  padding-left: 15px;
  text-align: right;
  font-weight: bold;
  width: 26%;
}
.deviceInfoItem-value {
  padding: 0px 15px 0px 8px;
  text-align: left;
  width: 70%;
}
#chartViewer-WaterLoggingChart {
  width: 100%;
  height: 210px;
}

.chartViewer-WaterLoggingList-Time {
  text-align: left;
}
.chartViewer-WaterLoggingList-Val {
  text-align: right;
}
</style>